<div>
    <div class="accordion">
        <div class="accordion-group" ng-show="!support_raw_api">
            <div class="accordion-heading" sc-collapse="in">
                <a class="accordion-toggle" href="javascript:void(0)">
                    HTTP RAW API
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="alert alert-block alert-danger" ng-show="warn_raw_api">
                        HTTP RAW API is not supported or disabled. Read <a href='https://github.com/ossrs/srs/wiki/v3_EN_HTTPApi#http-raw-api'>WIKI</a>。
                    </div>
                    <table class="table table-striped table-hover table-bordered" ng-show="http_api">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty scp-key="http_api.enabled" scp-value="http_api.enabled" scp-bool="true"
                            scp-desc="Whether enable HTTP API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty scp-key="http_api.listen" scp-value="http_api.listen"
                            scp-desc="The listen port for HTTP API, format is &lt;[address:]port&gt;. Default is 1985">
                        </tr>
                        <tr sc-pretty scp-key="http_api.crossdomain" scp-value="http_api.crossdomain" scp-bool="true"
                            scp-desc="Whether allow js CORS(JSONP). Default is {{true| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty scp-key="http_api.raw_api.enabled" scp-value="http_api.raw_api.enabled" scp-bool="true"
                            scp-desc="Whether enable HTTP RAW API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty scp-key="http_api.raw_api.allow_reload" scp-value="http_api.raw_api.allow_reload" scp-bool="true"
                            scp-desc="Whether allow HTTP RAW API to reload. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty scp-key="http_api.raw_api.allow_query" scp-value="http_api.raw_api.allow_query" scp-bool="true"
                            scp-desc="Whether allow HTTP RAW API to query. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty scp-key="http_api.raw_api.allow_update" scp-value="http_api.raw_api.allow_update" scp-bool="true"
                            scp-desc="Whether allow HTTP RAW API to update. Default is {{false| sc_filter_enabled}}">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="in">
                <a class="accordion-toggle" href="javascript:void(0)">
                    HTTP API Server
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.enabled" scp-bool="true"
                            scp-desc="Whether enabel HTTP API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.listen.value"
                            scp-desc="The HTTP API listen port, format is &lt;[address:]port&gt;. Default is 1985">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.crossdomain" scp-bool="true"
                            scp-desc="Whether allow CORS for js(JSONP). Default is {{true| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.raw_api.enabled" scp-bool="true"
                            scp-desc="Whether enable HTTP RAW API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.raw_api.allow_reload" scp-bool="true"
                            scp-desc="Whether allow reload by HTTP API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.raw_api.allow_query" scp-bool="true"
                            scp-desc="Whether allow query by HTTP API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_api.raw_api.allow_update" scp-bool="true"
                            scp-desc="Whether allow update by HTTP API. Default is {{false| sc_filter_enabled}}">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="out">
                <a class="accordion-toggle" href="javascript:void(0)">
                    SRS Global Config
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="accordion-inner">
                        <table class="table table-striped table-hover table-bordered">
                            <tr>
                                <th>Key</th>
                                <th>Value</th>
                                <th>Description</th>
                                <th>Opt</th>
                            </tr>
                            <tr sc-directive scd-data="global.listen" scd-span="span3"
                                scd-desc="RTMP listen port, format is &lt;[address:]port&gt;[,&lt;addressN&gt;portN]"
                                scd-array="true" scd-default="1935"
                                scd-submit="submit(global.listen)">
                            </tr>
                            <tr sc-directive scd-data="global.pid" scd-span="span3"
                                scd-desc="The pid file for SRS. Default is ./objs/srs.pid"
                                scd-default="./objs/srs.pid"
                                scd-submit="submit(global.pid)">
                            </tr>
                            <tr sc-directive scd-data="global.chunk_size" scd-span="span3"
                                scd-desc="RTMP chunk size. Default is 60000"
                                scd-default="60000"
                                scd-submit="submit(global.chunk_size)">
                            </tr>
                            <tr sc-directive scd-data="global.ff_log_dir" scd-span="span4"
                                scd-desc="FFMPEG log directory, use /dev/null to disable log. Default is ./objs"
                                scd-default="./objs"
                                scd-submit="submit(global.ff_log_dir)">
                            </tr>
                            <tr sc-directive scd-data="global.srs_log_tank" scd-span="span3"
                                scd-desc="System log store. Default is file"
                                scd-default="file", scd-select="file,console"
                                scd-submit="submit(global.srs_log_tank)">
                            </tr>
                            <tr sc-directive scd-data="global.srs_log_level" scd-span="span3"
                                scd-desc="System log level. Default is trace"
                                scd-default="trace" scd-select="verbose,info,trace,warn,error"
                                scd-submit="submit(global.srs_log_level)">
                            </tr>
                            <tr sc-directive scd-data="global.srs_log_file" scd-span="span4"
                                scd-desc="When log store is file, the log path. Default is ./objs/srs.log"
                                scd-default="./objs/srs.log"
                                scd-submit="submit(global.srs_log_file)"
                                ng-if="global.srs_log_tank.value == 'file'">
                            </tr>
                            <tr sc-directive scd-data="global.max_connections" scd-span="span3"
                                scd-desc="System maximum connections. Default is 1000"
                                scd-default="1000"
                                scd-submit="submit(global.max_connections)">
                            </tr>
                            <tr sc-pretty2 scp-data="global.daemon" scp-bool="true"
                                scp-desc="Whether start SRS as daemon. Default is {{true| sc_filter_yesno}}">
                            </tr>
                            <tr sc-directive scd-data="global.utc_time" scd-span="span4"
                                scd-desc="Whether use UTC time. Default is {{false| sc_filter_yesno}}"
                                scd-default="false" scd-bool="true"
                                scd-submit="submit(global.utc_time)">
                            </tr>
                            <tr sc-directive scd-data="global.pithy_print_ms" scd-span="span3"
                                scd-desc="Pithy log print interval in ms. Default is 10000"
                                scd-default="10000" scd-select="1000,3000,5000,10000,30000"
                                scd-submit="submit(global.pithy_print_ms)">
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="out">
                <a class="accordion-toggle" href="javascript:void(0)">
                    System Vhosts, total {{global.nb_vhosts.value}} vhosts configed.
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>
                                <a href="javscript:void(0)" ng-click="new_vhost()" class="icon-plus"></a>
                            </th>
                            <th>Name</th>
                            <th title="Whether Enabled">E</th>
                            <th title="Whether Origin Server">O</th>
                            <th title="DVR Configed">D</th>
                            <th title="HTTP Server Configed">H</th>
                            <th title="HTTP FLV Configed">FLV</th>
                            <th title="HLS Configed">HLS</th>
                            <th title="HDS Configed">HDS</th>
                            <th title="HTTP Callback">CB</th>
                            <th ng-show="false">Exec</th>
                            <th ng-show="false">BWT</th>
                            <th title="Forwarder">F</th>
                            <th title="Security Configed">S</th>
                            <th ng-show="false">Referer</th>
                            <th ng-show="false">MR</th>
                            <th ng-show="false">RTC</th>
                            <th ng-show="false">GOP</th>
                            <th ng-show="false">TcpNoDelay</th>
                            <th ng-show="false">MixCorrect</th>
                            <th ng-show="false">TimeJitter</th>
                            <th ng-show="false">ATC</th>
                            <th title="Transcode Configied">T</th>
                            <th title="Ingester Configed">I</th>
                            <th>
                                <a href="javascript:void(0)" ng-click="new_vhost()">Add</a>
                            </th>
                        </tr>
                        <tr ng-repeat="vhost in global.vhosts">
                            <td><a href="#/vhosts/{{vhost.id}}" ng-show="vhost.id">{{vhost.id}}</a><span ng-show="!vhost.id">No Stream</span> </td>
                            <td colspan="{{vhost.editable?13:1}}">
                                <span ng-show="!vhost.editable">{{vhost.name}}</span>
                                <span ng-show="vhost.editable">
                                    <input class="text span5" ng-model="vhost.name"><br/>
                                    Please input vhost name.
                                </span>
                            </td>
                            <td ng-show="!vhost.editable">{{vhost.enabled| sc_filter_yesno}}</td>
                            <td ng-show="!vhost.editable">{{vhost.origin| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.dvr| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.http_static| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.http_remux| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.hls| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.hds| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.http_hooks| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.exec| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.bandcheck| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.forward| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.security| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.refer| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.mr| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.min_latency| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.gop_cache| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.tcp_nodelay| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.mix_correct| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.time_jitter| sc_filter_yn}}</td>
                            <td ng-show="false && !vhost.editable">{{vhost.atc| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.transcode| sc_filter_yn}}</td>
                            <td ng-show="!vhost.editable">{{vhost.ingest| sc_filter_yn}}</td>
                            <td>
                                <span ng-show="vhost.editable">
                                    <!-- vhost exists in server -->
                                    <span ng-show="vhost.enabled != undefined">
                                        <a bravo-popover href="javascript:void(0)"
                                           data-content="Please confirm submit vhost {{vhost.name}}?" data-title="Confirm" data-placement="left"
                                           bravo-popover-confirm="update_vhost(vhost)">
                                            Submit
                                        </a>
                                        <a href="javascript:void(0)" ng-click="cancel_vhost(vhost)">Cancel</a>
                                    </span>
                                    <!-- vhost in adding. -->
                                    <span ng-show="vhost.enabled == undefined">
                                        <a bravo-popover href="javascript:void(0)"
                                           data-content="Please confirm submit vhost{{vhost.name}}?" data-title="Confirm" data-placement="left"
                                           bravo-popover-confirm="add_vhost(vhost)">
                                            Submit
                                        </a>
                                        <a href="javascript:void(0)" ng-click="abort_vhost(vhost)">Cancel</a>
                                    </span>
                                </span>
                                <span ng-show="!vhost.editable">
                                    <span ng-show="vhost.enabled">
                                        <span>Update</span>
                                        <a bravo-popover href="javascript:void(0)"
                                           data-content="Please confirm to disable {{vhost.name}}?" data-title="Confirm" data-placement="left"
                                           bravo-popover-confirm="disable_vhost(vhost)">
                                            Disable
                                        </a>
                                        <span>Delete</span>
                                    </span>
                                    <span ng-show="!vhost.enabled">
                                        <a href="javascript:void(0)" ng-click="edit_vhost(vhost)">编辑</a>
                                        <a bravo-popover href="javascript:void(0)"
                                           data-content="Please confirm to enable {{vhost.name}}?" data-title="Confirm" data-placement="left"
                                           bravo-popover-confirm="enable_vhost(vhost)">
                                            Enable
                                        </a>
                                        <a bravo-popover href="javascript:void(0)"
                                           data-content="Please confirm to delete {{vhost.name}}?" data-title="Confirm" data-placement="left"
                                           bravo-popover-confirm="delete_vhost(vhost)">
                                            Delete
                                        </a>
                                    </span>
                                    <a href="#/configs/{{vhost.name}}" ng-show="!vhost.editable">Detail</a>
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="hide">
                <a class="accordion-toggle" href="javascript:void(0)">
                    Config KAFKA
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty2 scp-data="global.kafka.enabled" scp-bool="true"
                            scp-desc="Whether enable KAFKA. Default is {{false| sc_filter_enabled}}">
                        </tr>
                        <tr sc-pretty2 scp-data="global.kafka.brokers"
                            scp-desc="The broker list, format is &lt;ip:port&gt;">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="hide">
                <a class="accordion-toggle" href="javascript:void(0)">
                    SRS Heartbeat
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty2 scp-data="global.heartbeat.enabled"
                            scp-desc="Whether enable heartbet. Default is {{false| sc_filter_enabled}}"
                            scd-bool="true">
                        </tr>
                        <tr sc-pretty2 scp-data="global.heartbeat.interval"
                            scp-desc="The interval in seconds. Default is 9.9"
                            ng-show="global.heartbeat.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.heartbeat.url"
                            scp-desc="The report url in json. Default is http://127.0.0.1:8085/api/v1/servers"
                            ng-show="global.heartbeat.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.heartbeat.device_id"
                            scp-desc="The device ID."
                            ng-show="global.heartbeat.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.heartbeat.smmaries"
                            scp-desc="Whether report summaries. Default is {{false| sc_filter_yesno}}"
                            scd-bool="true"
                        scd-submit="submit(global.heartbeat.summaries)"
                            ng-show="global.heartbeat.enabled.value">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="hide">
                <a class="accordion-toggle" href="javascript:void(0)">
                    STAT Hardward Config
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty2 scp-data="global.stats.network"
                            scp-desc="The stat network index. Default is 0">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stats.disk"
                            scp-desc="The stat disk name."
                            scd-array="true">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="hide">
                <a class="accordion-toggle" href="javascript:void(0)">
                    HTTP Server Config
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <th>Opt</th>
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_server.enabled"
                            scp-desc="Whether enable HTTP Server. Default is {{false| sc_filter_enabled}}"
                            scd-bool="true">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_server.listen"
                            scp-desc="The HTTP Server listen port, format is &lt;[address:]port&gt;. Default is 8080"
                            ng-show="global.http_server.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.http_server.dir"
                            scp-desc="The HTTP Server root directory. Default is ./objs/nginx/html"
                            ng-show="global.http_server.enabled.value">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="accordion-group" ng-show="support_raw_api">
            <div class="accordion-heading" sc-collapse="hide">
                <a class="accordion-toggle" href="javascript:void(0)">
                    Stream Caster Config
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Description</th>
                            <td>Opt</td>
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.enabled"
                            scp-desc="Whether enable StreamCaster. Default is {{false| sc_filter_enabled}}"
                            scd-bool="true">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.caster"
                            scp-desc="The type of StreamCaster. For example, mpegts_over_udp,rtsp,flv"
                            scd-select="mpegts_over_udp,rtsp,flv"
                            ng-show="global.stream_caster.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.output"
                            scp-desc="The output RTMP url."
                            ng-show="global.stream_caster.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.listen"
                            scp-desc="The listen port, format is &lt;port&gt;"
                            ng-show="global.stream_caster.enabled.value">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.rtp_port_min"
                            scp-desc="The RTP min port."
                            ng-show="global.stream_caster.enabled.value && global.stream_caster.caster.value == 'rtsp'">
                        </tr>
                        <tr sc-pretty2 scp-data="global.stream_caster.rtp_port_max"
                            scp-desc="The RTP max port."
                            ng-show="global.stream_caster.enabled.value && global.stream_caster.caster.value == 'rtsp'">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>